<template>
  <div class="SwitchOver">
    <van-tabs v-model="active" >
      <van-tab>
        <template #title> 肤质近况 </template>

        <!-- 测试结果 -->
        <van-grid :column-num="4"  :border="false">
          <van-grid-item>
            <p>70</p>
            <p>综合得分</p>
          </van-grid-item>

          <van-grid-item>
            <p>正常偏油</p>
            <p>出油情况</p>
          </van-grid-item>

          <van-grid-item>
            <p>蛋黄</p>
            <p>光滑度</p>
          </van-grid-item>

          <van-grid-item>
            <p>比较耐受</p>
            <p>耐受/敏感性</p>
          </van-grid-item>

          <van-grid-item>
            <p>轻度</p>
            <p>黑眼圈</p>
          </van-grid-item>

          <van-grid-item>
            <p>中度</p>
            <p>痘痘</p>
          </van-grid-item>

          <van-grid-item>
            <p>中度</p>
            <p>黑头</p>
          </van-grid-item>

          <van-grid-item>
            <p>粗大</p>
            <p>毛孔</p>
          </van-grid-item>
          <div class="content-bottom">
            根据02月26日-02月26日的一条检测记录生成
          </div>
        </van-grid>
      </van-tab>
      <van-tab>
        <template #title>了解度</template>
        <van-grid :border="false" :column-num="2">
          <van-grid-item>
            <p>我是你的智能瞄助理，我对你的了解度越高，测肤和产品就越准确哦!</p>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
          </van-grid-item>
        </van-grid>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
    };
  },
};
</script>

<style lang="scss" >

.SwitchOver {
  height: 340px;
  margin-left: 20px;
  // margin-right: 20px;
  margin-top: 1rem;
  .van-tabs__wrap {
    width: 710px;
    height: 60px;
    margin-right: 0px !important;
    .van-tabs__nav {
      justify-content: center;
    }
  }
  /* van-tab title 下滑线的更改样式 */

  .van-tabs__line {
    background-color: #ffffff;
    width: 46px;
    height: 4px;
    margin-bottom: 8px;
  }
  .van-tab {
    width: 354px;
    height: 60px;
    // 切换选项卡的背景
    &:nth-child(1) {
      background-color: #bbd2f4;
      color: #ffffff;
      font-size: 20px;
      font-family: PingFangSC-Medium-, PingFangSC-Medium;
      font-weight: normal;
      line-height: 24px;
      border-radius: 10px 0px 0px 0px;
      margin-right: 2px;
      span {
        width: 354px;
        text-align: center;
      }
    }
    &:nth-child(2) {
      background-color: #dbe9fd;
      font-size: 20px;
      font-family: PingFangSC-Medium-, PingFangSC-Medium;
      font-weight: normal;
      color: #6788ba;
      line-height: 24px;
      border-radius: 0px 10px 0px 0px;
      width: 354px;
      span {
        width: 354px;
        // height: 60px;
        text-align: center;
      }
    }
  }
  .van-tabs__content{
      .van-grid {
    margin-top: 4px;
    background-color: #edf4ff;
    width: 710px;
    height: 278px;
    opacity: 1;
    border-radius: 0px 0px 10px 10px;
    margin-right:0;
    
    .content-bottom {
      display: flex;
      text-align: center;
      margin-left: 153px;
      width: 404px;
      height: 28px;
    }
  }
  .van-grid-item__content--center {
    background-color: #edf4ff;
  }
  }
  
}
</style>
